<template>
  <div class="header-nav fixed left-0 top-0 w-full text-sm z-10">
    <div
      class="max-w-[1230px] h-[80px] mx-auto flex justify-between items-center px-2"
    >
      <div class="logo">HANMING</div>
      <div class="nav-list list-none flex items-center">
        <a
          class="nav-item ml-10 cursor-pointer"
          :href="item.href"
          v-for="item of navList"
          :key="item.href"
        >
          {{ item.name }}
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
const navList = [
  { name: '首页', href: '/' },
  //   { name: '文章', href: '' },
  { name: '关于', href: 'about' },
]
</script>

<style lang="less" scoped>
.nav-list {
  .nav-item {
    color: #fff;
    text-decoration: none;
    &:hover {
      color: #3874d8;
    }
  }
}
</style>>
